<template>
  <div>
    <vxe-collapse>
      <vxe-collapse-pane name="1">
        <template #title>
          <div>标题1</div>
        </template>

        <template #default>
          <div>内容1</div>
        </template>
      </vxe-collapse-pane>
      <vxe-collapse-pane name="2">
        <template #title>
          <div>标题2</div>
        </template>

        <template #default>
          <div>内容2</div>
        </template>
      </vxe-collapse-pane>
      <vxe-collapse-pane name="3">
        <template #title>
          <div>标题3</div>
        </template>

        <template #default>
          <div>内容3</div>
        </template>
      </vxe-collapse-pane>
      <vxe-collapse-pane name="4">
        <template #title>
          <div>标题4</div>
        </template>

        <template #default>
          <div>内容4</div>
        </template>
      </vxe-collapse-pane>
      <vxe-collapse-pane name="5">
        <template #title>
          <div>标题5</div>
        </template>

        <template #default>
          <div>内容5</div>
        </template>
      </vxe-collapse-pane>
    </vxe-collapse>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data () {
    return {
      show: true
    }
  },
  created () {
    setTimeout(() => {
      this.show = false
    }, 3000)
  }
})
</script>
